<template>
    <div class="chart-bordered" style="width:100%;height:100%;">
        <div class="container">
            <h3>{{title}}</h3>
            <div class="echarts-container" ref="echartsWape" :style="{'height':echartsHeight}"></div>
        </div>
        <span class="border-top-left"></span>
        <span class="border-top-right"></span>
        <span class="border-bottom-left"></span>
        <span class="border-bottom-right"></span>
    </div>
</template>


<script>
import * as $http from '@/api/dashboard';
export default {
    name: 'barEcharts',
    props: {
        title: {
            type: String,
            required: true
        },
        echartsHeight: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            mainChart: null,
            colorList: ['#0487ed', '#3eb177', '#c1c049', '#c59838', '#cd6237', '#e11000', '#aa00a0', '#59057b', '#ffa96a', '#7da87b', '#84f2d6', '#53c7f0', '#005585', '#2931b3', '#0666e8'],
            seriesData: [],

            // planePath: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
			planePath: `path://M754.4 163.36v103.2H279.52v-103.2a20.96 20.96 0 0 1 20.96-20.96h433.12a20.96 20.96 0 0 1 20.8 20.96z
			M133.12 503.52a35.36 35.36 0 0 0-23.68 43.68l101.92 352a151.68 151.68 0 0 1 107.52-43.2c57.28 0 86.56 25.12 112 48a123.2 123.2 0 0 0 68.48 36V392.16zM900.96 503.52l-366.88-112v547.04a123.84 123.84 0 0 0 67.68-36c26.08-22.24 55.36-48 112-48a152.48 152.48 0 0 1 108.16 43.36l102.08-352a35.36 35.36 0 0 0-23.04-42.4z
			M917.28 572l7.36-24.8a35.36 35.36 0 0 0-23.68-43.68l-366.88-112v49.92l362.24 112a35.2 35.2 0 0 1 20.96 18.56zM116.64 572.16l-7.36-24.8a35.36 35.36 0 0 1 23.68-43.68l366.88-112v49.92l-362.24 112a35.2 35.2 0 0 0-20.96 18.56z
			M438.4 221.6h-48a17.12 17.12 0 0 1 0-34.08h48a17.12 17.12 0 1 1 0 34.08zM643.52 221.6h-48a17.12 17.12 0 0 1 0-34.08h48a17.12 17.12 0 0 1 0 34.08zM336 349.76h-48a17.12 17.12 0 0 1 0-34.08h48a17.12 17.12 0 0 1 0 34.08zM540.32 349.76h-46.72a17.12 17.12 0 0 1 0-34.08h46.88a17.12 17.12 0 1 1 0 34.08zM746.4 349.76h-48a17.12 17.12 0 0 1 0-34.08h48a17.12 17.12 0 1 1 0 34.08z
			M494.56 1.28l44.96 0 0 111.84-44.96 0 0-111.84Z
			M595.68 606.72a72.96 52.16 90 1 0 104.32 0 72.96 52.16 90 1 0-104.32 0Z
			M335.52 606.72a72.96 52.16 90 1 0 104.32 0 72.96 52.16 90 1 0-104.32 0Z
			M892.64 971.36c-38.88 0-57.12-16-80-36.8a140 140 0 0 0-105.92-43.36c-55.04 0-77.44 30.24-102.24 52.64a124.48 124.48 0 0 1-87.84 36.64 110.24 110.24 0 0 1-82.72-33.76c-24.8-22.4-56.48-55.04-112-55.04a154.24 154.24 0 0 0-112 44c-22.88 20.64-40.96 36.8-80 36.8a97.28 97.28 0 0 1-33.12-5.44v44.16a80.8 80.8 0 0 0 43.04 11.52c55.04 0 73.28-33.28 98.08-55.52a112 112 0 0 1 83.2-33.12c38.72 0 60.32 23.52 83.2 44.16a152.96 152.96 0 0 0 111.04 44.64 167.04 167.04 0 0 0 116-48c22.88-20.64 35.2-41.76 74.08-41.76a98.56 98.56 0 0 1 77.76 32c24.8 22.4 52.96 48 108.16 48a148.16 148.16 0 0 0 33.44-3.68v-43.52a97.44 97.44 0 0 1-32.16 5.44z`,
		
			geoCoordMap: {
                '上海': [121.4648,31.2891],
                '东莞': [113.8953,22.901],
                '东营': [118.7073,37.5513],
                '中山': [113.4229,22.478],
                '临汾': [111.4783,36.1615],
                '临沂': [118.3118,35.2936],
                '丹东': [124.541,40.4242],
                '丽水': [119.5642,28.1854],
                '乌鲁木齐': [87.9236,43.5883],
                '佛山': [112.8955,23.1097],
                '保定': [115.0488,39.0948],
                '兰州': [103.5901,36.3043],
                '包头': [110.3467,41.4899],
                '北京': [116.4551,40.2539],
                '北海': [109.314,21.6211],
                '南京': [118.8062,31.9208],
                '南宁': [108.479,23.1152],
                '南昌': [116.0046,28.6633],
                '南通': [121.1023,32.1625],
                '厦门': [118.1689,24.6478],
                '台州': [121.1353,28.6688],
                '合肥': [117.29,32.0581],
                '呼和浩特': [111.4124,40.4901],
                '咸阳': [108.4131,34.8706],
                '哈尔滨': [127.9688,45.368],
                '唐山': [118.4766,39.6826],
                '嘉兴': [120.9155,30.6354],
                '大同': [113.7854,39.8035],
                '大连': [122.2229,39.4409],
                '天津': [117.4219,39.4189],
                '太原': [112.3352,37.9413],
                '威海': [121.9482,37.1393],
                '宁波': [121.5967,29.6466],
                '宝鸡': [107.1826,34.3433],
                '宿迁': [118.5535,33.7775],
                '常州': [119.4543,31.5582],
                '广州': [113.5107,23.2196],
                '廊坊': [116.521,39.0509],
                '延安': [109.1052,36.4252],
                '张家口': [115.1477,40.8527],
                '徐州': [117.5208,34.3268],
                '德州': [116.6858,37.2107],
                '惠州': [114.6204,23.1647],
                '成都': [103.9526,30.7617],
                '扬州': [119.4653,32.8162],
                '承德': [117.5757,41.4075],
                '拉萨': [91.1865,30.1465],
                '无锡': [120.3442,31.5527],
                '日照': [119.2786,35.5023],
                '昆明': [102.9199,25.4663],
                '杭州': [119.5313,29.8773],
                '枣庄': [117.323,34.8926],
                '柳州': [109.3799,24.9774],
                '株洲': [113.5327,27.0319],
                '武汉': [114.3896,30.6628],
                '汕头': [117.1692,23.3405],
                '江门': [112.6318,22.1484],
                '沈阳': [123.1238,42.1216],
                '沧州': [116.8286,38.2104],
                '河源': [114.917,23.9722],
                '泉州': [118.3228,25.1147],
                '泰安': [117.0264,36.0516],
                '泰州': [120.0586,32.5525],
                '济南': [117.1582,36.8701],
                '济宁': [116.8286,35.3375],
                '海口': [110.3893,19.8516],
                '淄博': [118.0371,36.6064],
                '淮安': [118.927,33.4039],
                '深圳': [114.5435,22.5439],
                '清远': [112.9175,24.3292],
                '温州': [120.498,27.8119],
                '渭南': [109.7864,35.0299],
                '湖州': [119.8608,30.7782],
                '湘潭': [112.5439,27.7075],
                '滨州': [117.8174,37.4963],
                '潍坊': [119.0918,36.524],
                '烟台': [120.7397,37.5128],
                '玉溪': [101.9312,23.8898],
                '珠海': [113.7305,22.1155],
                '盐城': [120.2234,33.5577],
                '盘锦': [121.9482,41.0449],
                '石家庄': [114.4995,38.1006],
                '福州': [119.4543,25.9222],
                '秦皇岛': [119.2126,40.0232],
                '绍兴': [120.564,29.7565],
                '聊城': [115.9167,36.4032],
                '肇庆': [112.1265,23.5822],
                '舟山': [122.2559,30.2234],
                '苏州': [120.6519,31.3989],
                '莱芜': [117.6526,36.2714],
                '菏泽': [115.6201,35.2057],
                '营口': [122.4316,40.4297],
                '葫芦岛': [120.1575,40.578],
                '衡水': [115.8838,37.7161],
                '衢州': [118.6853,28.8666],
                '西宁': [101.4038,36.8207],
                '西安': [109.1162,34.2004],
                '贵阳': [106.6992,26.7682],
                '连云港': [119.1248,34.552],
                '邢台': [114.8071,37.2821],
                '邯郸': [114.4775,36.535],
                '郑州': [113.4668,34.6234],
                '鄂尔多斯': [108.9734,39.2487],
                '重庆': [107.7539,30.1904],
                '金华': [120.0037,29.1028],
                '铜川': [109.0393,35.1947],
                '银川': [106.3586,38.1775],
                '镇江': [119.4763,31.9702],
                '长春': [125.8154,44.2584],
                '长沙': [113.0823,28.2568],
                '长治': [112.8625,36.4746],
                '阳泉': [113.4778,38.0951],
                '青岛': [120.4651,36.3373],
                '韶关': [113.7964,24.7028]
			},
			windowResizeFun:null
        };
    },
    destroyed() {
        if (this.mainChart) {
			this.mainChart.dispose();
			this.mainChart = null;
		}
		if(this.windowResizeFun){
			window.removeEventListener("resize",this.windowResizeFun,false)
		}
    },
    mounted() {
        let _this = this;
        this.windowResizeFun = function(){
            if (_this.mainChart) {
                _this.mainChart.resize();
            }
        }
        window.addEventListener('resize', this.windowResizeFun);
    },
    methods: {
        // 随机生成十六进制颜色
        randomHexColor() {
            var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
            while (hex.length < 6) {
                //while循环判断hex位数，少于6位前面加0凑够6位
                hex = '0' + hex;
            }
            return '#' + hex; //返回‘#'开头16进制颜色
        },

        convertData(data) {
			let _this = this,
				res = [];
			data.forEach((item)=>{
                var fromCoord = _this.geoCoordMap[item[0]];
				var toCoord = _this.geoCoordMap[item[1]];
				if (fromCoord && toCoord) {
                    res.push({
                        fromName: item[0],
                        toName: item[1],
                        coords: [fromCoord, toCoord],
                        value: item[2]
                    });
                }
			})
            return res;
        },

        getMapCitys(datas){
			let _this = this;
            let citysSet = new Set([]);
            datas.forEach(item=>{
                citysSet.add(item[0]);
                citysSet.add(item[1]);
			})
			
			let citysArray = Array.from(citysSet);
			let citys = citysArray.map(item=>{
				return {
					name: item,
					value: _this.geoCoordMap[item]
				}
			})
			console.log('citys:');
			console.log(citys);
            return citys;
        },

        // 渲染图表
        echartRender: function(seriesData) {
            let _this = this;
            let mainChart = this.$echarts.init(this.$refs.echartsWape, 'dark');

            var option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    formatter: function(params, ticket, callback) {
                        console.log(params);
                        if (params.seriesType == 'effectScatter') {
                            return '线路：' + params.data.name + '' + params.data.value[2];
                        } else if (params.seriesType == 'lines') {
                            return params.data.fromName + '到' + params.data.toName + '，运输量：' + params.data.value;
                        } else {
                            return params.name;
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    top: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: true,
                            color: '#fff'
                        }
                    },
					roam: true,
					zoom:2,
					center:[112.147594,31.688467],
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: '#404a59'
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                },
                series: [
                    {
                        name: '地点',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                fontSize:16,
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: 10,
                        showEffectOn: 'render',
                        itemStyle: {
                            normal: {
                                color: '#46bee9'
                            }
						},
                        data:_this.getMapCitys(seriesData)
                    },{
                        name: '线路',
                        type: 'lines',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        large: true,
						effect: {
							show: true,
							period: 6,
							trailLength: 0,
							symbol: _this.planePath,
							symbolSize: 15
						},
						lineStyle: {
							normal: {
								color: "#46bee9",
								width: 1,
								opacity: 0.6,
								curveness: 0.2
							}
						},
                        data: _this.convertData(seriesData)
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            if (option && typeof option === 'object') {
                mainChart.setOption(option, true);
            }
            this.mainChart = mainChart;
        },

        // 图表设置数据
        setData(seriesData) {
            let _this = this;
            if (this.mainChart && typeof this.mainChart.setOption == 'function') {
                this.mainChart.setOption({
                    series: seriesData
                });
                this.seriesData = seriesData;
            } else {
                this.echartRender(seriesData);
                this.seriesData = seriesData;
            }
        }
    }
};
</script>
<style scoped>
.echarts-container {
    width: 100%;
}
.chart-bordered {
    background: url('~@/assets/dashboard-img/echart-bg.png');
    border: 1px solid #144277;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    height: 100%;
    width: 100%;
}

.border-top-left,
.border-top-right,
.border-bottom-left,
.border-bottom-right {
    position: absolute;
    width: 10px;
    height: 10px;
    line-height: 10px;
    display: block;
}

.border-top-left {
    left: 0;
    top: 0;
    border-left: solid 2px #0e68b1;
    border-top: solid 2px #0e68b1;
}

.border-top-right {
    right: 0;
    top: 0;
    border-right: solid 2px #0e68b1;
    border-top: solid 2px #0e68b1;
}

.border-bottom-left {
    left: 0;
    bottom: 0;
    border-left: solid 2px #0e68b1;
    border-bottom: solid 2px #0e68b1;
}

.border-bottom-right {
    right: 0;
    bottom: 0;
    border-right: solid 2px #0e68b1;
    border-bottom: solid 2px #0e68b1;
}
</style>
